<template>
  <section class="todoapp">

    <HeaderList @add='add'></HeaderList>

    <BodyList :list='newList' @del='del' @qx='qx'></BodyList>

    <FooterList @qh='qh' :type='type' :sum='sum' :yi='yi' @delAll='delAll'></FooterList>
  </section>
</template>

<script>
import HeaderList from "./components/HeaderList"
import BodyList from "./components/BodyList"
import FooterList from "./components/FooterList"

export default {
  data(){
    return {
      list:[
        {id:1,label:"读万卷书",isShow:true},
        {id:2,label:"行万里路",isShow:true},
      ],
      type:'all',
    }
  },
  components:{
    HeaderList,
    BodyList,
    FooterList,
  },
  methods: {
    add(value){
      if(value === '') return alert('输入不可为空')
      this.list =[...this.list,{id:JSON.stringify(new Date),label:value,isShow:false}]
    },
    del(value) {
      this.list =this.list.filter(item => item.id !==value )
      // console.log(this.list);
    },
    qh(value) {
      this.type = value
    },
    delAll() {
      this.list =this.list.filter(item => !item.isShow)
    },
    qx() {
      this.list.forEach(item => item.isShow = true)
    }
  },
  computed:{
    newList(){
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter(item => !item.isShow)
        case 'completed':
          return this.list.filter(item => item.isShow)
        default:
          return this.list

      }
    },
    sum(){
      return this.list.filter(item => !item.isShow).length
    },
    yi(){
      return this.list.some(item =>item.isShow)
    },

  }
}
</script>

<style></style>
